<template>
    <div class="basic-wrapper">
        <div class="title">
            <span>基本信息</span>
            <el-icon color="#409eff" @click="edit" v-if="detailData"><Edit /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item label="集成者">
                        {{ detailData.integratorName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="标识符">
                        {{ detailData.messageNo }}
                    </el-descriptions-item>
                    <el-descriptions-item label="消息类型">
                        {{ detailData.typeName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="集成范围">
                        <div class="tag-item-value">
                            <el-tag :type="detailData.integrationScope === 'ALL' ? 'primary' : 'warning'">{{
                                IntegrationScope[detailData.integrationScope]
                            }}</el-tag>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="创建人">
                        {{ detailData.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间">
                        {{ detailData.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="首次推送时间">
                        {{ detailData.firstExecTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="最新推送时间">
                        {{ detailData.lastExecTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="描述">
                        <div class="value">{{ detailData?.messageDesc }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { IntegrationScope } from '@/utils/constant';
import CreateEdit from '../../../list/CreateEditModal.vue';
import { showPopupBox } from '@great/utils';
import { Edit } from '@element-plus/icons-vue';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const loading = ref(true);
const initDetail = inject('initDetail');

// 查看脚本
const onViewScript = row => {
    // TODO: 弹出脚本详情弹框
};
const edit = () => {
    showPopupBox(CreateEdit, {
        row: props.detailData as any,
        callBack: initDetail as () => Promise<void>
    });
};
watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .tag-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
